<template>
    <section class="component-box">
        <h3>课程报表</h3>
        <p>章节最多的10个课程</p>
        <div ref="echartsRef" class="echarts"></div>
    </section>
</template>
<script lang="ts" setup>
// 步骤1：引入echarts
import * as echarts from 'echarts';
import request from "@/utils/request";
import { onMounted, ref, watch } from "vue";

type EChartsOption = echarts.EChartsOption;

const echartsRef = ref();

let myEcharts: any;

/* 
 * 步骤4：定义图表选项和数据（饼图）
 * 饼图比较简单，只需要定义data即可
 */
const option: EChartsOption = {
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            type: 'pie',
            name: '章节数量',
            data: [
                {
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ]
        }
    ]
};

const handleQuery = () => {
    request({ url: `/echarts/queryCourseList` }).then(res => {
        if (res.data.code >= 1) {
            const titleData: string[] = [];
            const data: number[] = [];
            option.series[0].data = res.data.data.map(v => ({
                value: v.count,
                name: v.name
            }));
            myEcharts.setOption(option);
        }
    })
}

onMounted(() => {
    // 步骤2：获取需要渲染的dom节点（也可以使用：document.querySelector('.echarts')）
    // vue需要在onMounted中才能获取到dom节点
    const echartsDom = echartsRef.value;
    // 步骤3：初始化echarts实例
    myEcharts = echarts.init(echartsDom);
    handleQuery();
});



</script>
<style lang="scss" scoped>
.echarts {
    min-width: 400px;
    height: 500px;
}
</style>